<template>
  <el-dialog
    v-if="showDialogFlag"
    v-dialog-drag
    title="列数据导入"
    :visible.sync="showDialogFlag"
    :show-close="true"
    class="small-padding-dialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
  >
    <el-alert type="info" :closable="false" title="{" />
    <code-editor
      ref="aceEditor"
      v-model="renderCode"
      mode="json"
      :readonly="false"
      class="aceEditor"
    />
    <el-alert type="info" :closable="false" title="}" />
    <div slot="footer" class="dialog-footer">
      <el-button @click="runClose()">
        {{ i18nt("designer.hint.cancel") }}
      </el-button>
      <el-button type="primary" @click="saveEventHandler">
        {{ i18nt("designer.hint.confirm") }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
/* eslint-disable vue/require-default-prop */
import CodeEditor from "Yan/components/code-editor/index";
import i18n from "Yan/utils/i18n";
export default {
  components: { CodeEditor },
  mixins: [i18n],
  props: {
    onSave: Function,
    runClose: Function,
  },
  data() {
    return {
      showDialogFlag: false,
      renderCode: "",
    };
  },
  mounted() {
    this.showDialogFlag = true;
  },
  methods: {
    close() {
      this.showDialogFlag = false;
    },
    saveEventHandler() {
      const codeHints = this.$refs.aceEditor.getEditorAnnotations();
      let syntaxErrorFlag = false;
      if (!!codeHints && codeHints.length > 0) {
        codeHints.forEach((chItem) => {
          if (chItem.type === "error") {
            syntaxErrorFlag = true;
          }
        });

        if (syntaxErrorFlag) {
          this.$message.error(
            this.i18nt("designer.setting.syntaxCheckWarning")
          );
          return;
        }
      }

      if (this.onSave) this.onSave(this.renderCode);
      //   this.optionModel[this.curEventName] = this.eventHandlerCode;
      //   this.showWidgetEventDialogFlag = false;
    },
  },
};
</script>
